<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5--自定义标签</title>
    <script>
        document.createElement("my");
    </script>
    <style>
     my{
         width:150px;
         height:150px;
         background-color: yellow;
         display: block;
     }
    </style>
</head>
<body>
<my>nihsoaa</my>
<canvas id="c" width="500" height="500" style="border:1px solid black;"></canvas>
<script>
    var c=document.getElementById("c");
    var ctx=c.getContext("2d");
    ctx.fillStyle="black";
    //0 0 代表从左上角开始的坐标，然后是长宽
    ctx.fillRect(0,0,150,75);
    //绘制一条直线
    ctx.moveTo(150,75);
    ctx.lineTo(150,200);
    ctx.stroke();
    //绘制一个圆,moveTo是移动绘制开始的点
    ctx.moveTo(150,200);
    ctx.beginPath();
    ctx.arc(150,200,50,0,1*Math.PI);
    ctx.stroke();
    ctx.lineTo(150,75);
    ctx.stroke();
    ctx.lineTo(200,200);
    ctx.stroke();
    //空心字体
    ctx.font="30px Arial";
    ctx.strokeText("Hello Mengzhuo",200,50);
    //实心字体
    ctx.font="30px Arial";
    ctx.fillText("Hello World",200,70);
    //渐变,grd200,200,300,300  代表的是渐变的程度
    var grd=ctx.createLinearGradient(200,200,300,300);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    ctx.fillStyle=grd;
    ctx.fillRect(200,200,300,300);
    //画图片

</script>
</body>
</html>